<template>
  <div class="me">
    <div class="head-content">
      <div class="head-row">
        <div class="head-row-seting-content" @click.stop="goToSetting">
          <span class="icon iconfont setting">&#xe78e;</span>
        </div>
        <div class="user-avatar">
          <!----><img
            @click.stop="goToUserInfo"
            class="u-avatar u-avatar--circle"
            src="/static/img/main/32.webp"
            draggable="false"
          />
        </div>
        <div>
          <div class="user-name">
            huihui138208
            <!----><img
              @click.stop="goToVipPage"
              class="level-img"
              src="/static/img/main/me_icon.png"
              draggable="false"
            />
          </div>
          <div class="user-id" @click.stop="goToUserInfo">ID:1722</div>
          <div class="infp-row">
            <div class="infp-row-item" style="opacity: 0.6">
              Balance<span class="infp-row-item-text">$3.90</span>
              <div class="infp-row-item-eye">
                <span class="icon iconfont eye">&#xe869;</span>
              </div>
            </div>
            <div class="infp-row-item">
              <div class="icon-theme">
                <!----><img
                  class="icon-theme-img"
                  src="/static/img/main/light.png"
                  draggable="false"
                />
              </div>
              <div class="icon-theme">
                <!----><img
                  class="icon-theme-img"
                  src="/static/img/main/dark_s.png"
                  draggable="false"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="order-content">
      <div class="order-title">YOUR ORDERS</div>
      <div class="order-row">
        <div class="order-item" @click="goToOrder(1)">
          <!----><img
            class="oerder-item-icon"
            src="/static/img/main/order_jxz.png"
            draggable="false"
          />
          <div class="order-name">PENGDING</div>
        </div>
        <div class="order-item" @click="goToOrder(2)">
          <!----><img
            class="oerder-item-icon"
            src="/static/img/main/order_ywc.png"
            draggable="false"
          />
          <div class="order-name">RECEIVED</div>
        </div>
        <div class="order-item" @click="goToOrder(0)">
          <!----><img
            class="oerder-item-icon"
            src="/static/img/main/all_order.png"
            draggable="false"
          />
          <div class="order-name">ALL</div>
        </div>
      </div>
    </div>

    <div class="order-content">
      <div class="order-title">Assets</div>
      <div class="info-row">
        <div class="info-item" @click="goToWallet">
          <div class="info-item-name">Balance</div>
          <div class="info-item-text">
            $<span style="margin-left: 5px"
              ><span
                class="u-count-num"
                style="
                  font-size: 14px;
                  font-weight: normal;
                  color: rgb(252, 198, 45);
                "
                ><span>3.90</span></span
              ></span
            >
          </div>
        </div>
        <div class="info-item">
          <div class="info-item-name">Voucher</div>
          <div class="info-item-text" style="font-size: 12px">$ 30.00</div>
        </div>
        <div class="info-item">
          <div class="info-item-name">Commission</div>
          <div class="info-item-text">$<span>0.00</span></div>
        </div>
      </div>
    </div>

    <div class="order-content">
      <div class="order-title">Common</div>
      <div class="tool-body">
        <div class="tool-item" v-for="(item, index) in tools" :key="index" @click="goToPath(item.path)">
          <!----><img
            class="tool-icon"
            :style="{ transform: 'scale(' + item.scale + ')' }"
            :src="'/static/img/main/' + item.icon"
            draggable="false"
          />
          <div class="tool-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tools: [
        {
          icon: "fenlei.png",
          name: "Inventory",
          scale: 1,
           path:"warehouse"
        },
        {
          icon: "share.png",
          name: "Share",
          scale: 1.2,
          path:"share"
        },
        {
          icon: "address.png",
          name: "Delivery Address",
          scale: 1.2,
          path:"addressList"
        },
        {
          icon: "c_us.png",
          name: "Contact Us",
          scale: 0.95,
          path:"contactUs"
        },
        {
          icon: "my_box.png",
          name: "Open record",
          path:"boxLog",
          scale: 1.2,
        },
        {
          icon: "my_bos.png",
          name: "My Box",
          path:"myBox",
          scale: 1.1,
        },
        {
          icon: "about.png",
          name: "About Us",
          scale: 1,
           path:"about",
        },
      ],
    };
  },
  methods: {
     goToPath(name){
      this.$router.push({
        name: name,
      });
    },
    goToWallet(){
      this.$router.push({
        name: "wallet",
      });
    },
    goToOrder(type) {
      this.$router.push({
        name: "order",
        query: {
          type,
        },
      });
    },
    goToVipPage() {
      this.$router.push({
        name: "vipPage",
      });
    },
    goToSetting() {
      this.$router.push({
        name: "setting",
      });
    },
    goToUserInfo() {
      this.$router.push({
        name: "userInfo",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.me {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: calc(100vh - 50px);
  .head-content {
    padding-top: calc(0px);
    position: relative;
    width: 100%;
    height: 119px;
    margin-bottom: 8px;
    background: var(--content-bc);
    overflow: hidden;
    .head-row {
      padding: 0 10px 0 15px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      margin-top: 43px;
      .head-row-seting-content {
        width: 29px;
        height: 29px;
        position: absolute;
        top: -20px;
        right: 10px;
        .setting {
          font-size: 22px;
          line-height: 22px;
          font-weight: normal;
          top: 0px;
          color: rgb(153, 153, 153);
        }
      }
      .user-avatar {
        width: 58px;
        height: 58px;
        border-radius: 100%;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .u-avatar--circle {
          border-radius: 100px;
          background-color: transparent;
          width: 58px;
          height: 58px;
        }
      }

      .user-id {
        font-size: 12px;
        opacity: 0.8;
        color: var(--text-color);
      }
      .infp-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 11px;
        color: var(--text-color);
        .infp-row-item {
          margin-right: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          .infp-row-item-text {
            margin: 0 3px;
          }
          .infp-row-item-eye {
            width: 12px;
            height: 12px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
          .icon-theme {
            padding: 0 2px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .icon-theme-img {
            width: 18px;
            height: 18px;
          }
        }
      }
      .user-name {
        font-size: 16px;
        color: var(--text-color);
        font-weight: 500;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .level-img {
          width: 31px;
          height: 31px;
          margin-left: 10px;
        }
      }
    }
  }

  .order-content {
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background-color: var(--content-bc);
    color: var(--text-color);
    padding: 8px;
    .order-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    .order-row {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .order-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius: 6px;
      .oerder-item-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 5px;
      }
      .order-name {
        font-size: 14px;
        font-weight: 300;
        text-transform: uppercase;
      }
    }

    .info-row {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 15px 0 0;
      box-sizing: border-box;
      .info-item {
        margin: 5px;
        flex: 1;
        width: 111px;
        height: 83px;
        border-radius: 2px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 15px 10px;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 300;
        background-color: var(--main-bc-color);
        overflow: hidden;
        position: relative;
        .info-item-name {
          margin-bottom: 10px;
        }

        .info-item-text {
          font-family: bbzy;
          color: #fcc62d;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }

    .tool-body {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      padding: 0 15px 0 0;
      padding-top: 0;
      color: var(--text-color);
      .tool-item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 5px 0;
        padding-top: 5px;
        .tool-icon {
          width: 37px;
          height: 37px;
          margin-bottom: 8px;
        }
        .tool-name {
          font-size: 12px;
          font-weight: 400;
          text-transform: uppercase;
          text-align: center;
        }
      }
    }
  }
}
</style>